<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>404 Not Found</title>
  <style>
    :root { --fg:#0f172a; --bg:#f8fafc; --muted:#64748b; --accent:#2563eb; --card:#ffffff; }
    @media (prefers-color-scheme: dark) {
      :root { --fg:#e2e8f0; --bg:#0b1220; --muted:#94a3b8; --accent:#60a5fa; --card:#0f172a; }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:var(--fg); background:radial-gradient(1000px 600px at 10% -10%, #1d4ed811, transparent),
                         radial-gradient(800px 500px at 110% 110%, #9333ea11, transparent),
                         var(--bg);
      display:grid; place-items:center; padding:24px;
    }
    .card{
      width:min(720px, 92vw);
      background:var(--card); border:1px solid #00000011; border-radius:20px;
      padding:32px; box-shadow:0 10px 30px #0000001a, inset 0 1px #ffffff22;
      backdrop-filter:saturate(1.2) blur(4px);
    }
    .code{
      display:inline-block; font-weight:800; letter-spacing:2px;
      font-size:clamp(48px, 8vw, 96px); line-height:1; position:relative;
    }
    .code::after{
      content:"404"; position:absolute; left:2px; top:2px; opacity:.15; filter:blur(2px);
    }
    h1{margin:.25em 0 .2em; font-size:clamp(20px, 3vw, 28px)}
    p{margin:.5em 0; color:var(--muted)}
    .row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
    a.button{
      display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px;
      text-decoration:none; border:1px solid #00000022; background:#ffffff10; color:var(--fg);
      transition:transform .06s ease, background .2s ease, border-color .2s ease;
      user-select:none;
    }
    a.button:hover{ transform:translateY(-1px); border-color:#00000044; }
    a.primary{ background:var(--accent); color:white; border-color:transparent; }
    .hint{ font-size:12px; opacity:.8; margin-top:14px }
    .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    .small{ font-size:12px; opacity:.9 }
    .footer{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px}
    .path{padding:8px 12px; background:#00000008; border:1px dashed #00000022; border-radius:10px}
    @media (max-width:420px){ .footer{flex-direction:column; align-items:flex-start} }
  </style>
</head>
<body>
  <main class="card" role="main" aria-labelledby="title">
    <div class="code" aria-hidden="true">404</div>
    <h1 id="title">页面走丢了</h1>
    <p>你要的资源不在这儿（或者被程序员深情地 <span class="mono">rm -rf</span> 了）。</p>
    <div class="footer">
      <div class="path mono small" id="req-path">GET <span>/unknown</span> → 404</div>
      <div class="row">
        <a class="button" href="javascript:history.back()">
          ← 返回上一页
        </a>
        <a class="button primary" href="/">
          去首页 →
        </a>
      </div>
    </div>
    <p class="hint">小贴士：如果这是动态路由，请检查拼写、大小写和尾部斜杠；静态文件请确认部署路径与 MIME 配置。</p>
  </main>

  <script>
    // 显示实际请求路径 & 友好回退
    (function () {
      var path = (location.pathname || "/") + (location.search || "");
      var el = document.getElementById("req-path");
      if (el) el.innerHTML = 'GET <span>' + path.replace(/</g,"&lt;").replace(/>/g,"&gt;") + '</span> → 404';
      // 可选：N秒后跳首页（不想跳就注释掉）
      // setTimeout(function(){ location.href = "/"; }, 8000);
    })();
  </script>
</body>
</html>
